<template>
    <transition name='login'>
        <div class="login">
            <LoginLeft/>
            <div class="right">
                <p class="title">欢迎登陆TodoList</p>
                <Input 
                    text="username" 
                    rule="^[a-zA-Z0-9_-]{4,16}$"
                    @getUserInfo="username => this.username = username"
                    pText="账号必须为4-16位的数字字母下划线"
                />
                <Input 
                    text="password" 
                    type="password"
                    rule="^[a-zA-Z0-9_-]{4,16}$"
                    @getUserInfo ="password => this.password = password"
                    pText="密码必须为6-16位的数字字母下划线"
                />
                <LoginBtn btnText = "登陆" @click.native="submitLoginRequest"/>
                <a href="javascript:;" @click="goRegiter">未注册？现在注册！</a>
            </div>
            <Tips :msg = 'loginMsg' v-show="upBoxisShow"/>
        </div>
    </transition>
</template>

<script>
    import {mapState} from 'vuex'
    import Input from '../component/UserInput.vue'
    import LoginLeft from '../component/LoginLeft.vue'
    import LoginBtn from '@/component/LoginBtn.vue'
    import Tips from '@/component/Tips.vue'
    export default {
        name:"Login-Component",
        components:{Input,LoginLeft,LoginBtn,Tips},
        data(){
            return {
                username:"",
                password:""
            }
        },
        methods:{
            // 去注册页面
            goRegiter(){
                this.$router.push('/UserRegister')
            },

            // 提交登陆请求
            submitLoginRequest(){
                const user ={
                    username:this.username,
                    password:this.password
                }
                this.$store.dispatch('Login/submitLoginRequest',user)

                setTimeout(()=>{
                    if(sessionStorage.getItem('token')){
                    this.$router.push('/Home')
                    }
                },1200)
            }
        },
        computed:{
            ...mapState('Login',['loginMsg','upBoxisShow'])
        }
    
    }
</script>

<style lang='less'>
    .login{
        width: 60%;
        height: 70%;
        background: rgb(243, 228, 228);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 1vw;
        display: flex;
        transition: .5s;
    }
    .login-enter,.login-leave-to{
        opacity: 0;
    }

    .login-enter-to,.login-leave{
        opacity: 1;
    }

    a{
        font-size: 1vw;
        text-decoration: none;
        color: #586d97;
    }

    .right{
        width: 40%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        

        .title{
            font-size: 2vw;
            color: #586d97;
            margin-bottom: 2.6vw;
        }

        
    }
</style>